<template>
  <div class="container-content">
  	<my-factor id="factor" ref="factor" @has-wind="onSuccessWind" @video-change="videoChange" @auto-change="drawAutoMap" @draw-light="drawLight" @draw-radar="drawRadar" @draw-moon="drawMoon" @draw-forecast="drawForecast" @weather-change='weatherChange' @draw-waterlevel="drawWaterlevel" @draw-rsvrwater="showRsvrWater" @draw-riverwater="showRiverWater" @draw-warn="drawWarn" @isShow='videoClose' @adjust-map="adjustMap" @grid-change="gridChange"
  @init-warning="initWarning"
  @env-change="envData"
    ></my-factor>
  	<div id="container" v-show="!hasWind" @click='clickWaterlevel($event)'></div>
  	<div class="monitor-wind" v-show="hasWind">
  		<iframe src="http://10.135.118.78/typhoon" width=" 100%" height="100%"></iframe>
  	</div>

  	<div class="monitor_title" v-show="currentType.title !== '台风' && currentType.title !== '自动站'">
  		<span v-for="(item, index) in monitortitle">
  			{{item.time}}  {{item.name}}
  		</span>
  	</div>
  	<div class="automan_title" v-show="currentType.title === '自动站'">
  		<div v-for="(item, index) in monitortitle">
  			<span :class="{'active': item.active}" @click="checkTimeTitle(item, $event)">{{item.time}} {{item.name}}</span>
  			<span @click="closeTimeTitle(item, $event)">x</span>
  		</div>
  	</div>

  	<div class="color-bar" v-show="currentType.title === '天气'||currentType.title === '卫星'||currentType.title === '雷达'||currentType.title === '客观预报' || currentType.title ==='自动站'">
  		<div class='title' ref='colorbartitle'></div>
  		<div class='detail' ref='colorbardetail'></div>
  	</div>

  	<div class="waterlevelCharts" v-show='showwaterlevelechart && currentType.title === "水位"'>
  		<div class='closecharts' @click="closewaterlevelchart">×</div>
  		<div id='wlChart'></div>
  	</div>
  	<div class="warnInfo" v-show="showWarninfo">
  		<div class="warnInfoContent"></div>
  		<div class="closeWarnInfo" @click='closeWarnInfo'>×</div>
  	</div>
  	<div class="automan-table" v-show="showAutomanTable">
  		<div class="automan-table-choose">
  			<select ref="automanselect" @change="showStationData">
  				<option value="Precipitation">降雨量</option>
  				<option value="DryBulTemp">温度</option>
  				<option value="WindVelocity">风</option>
  				<!-- <option value=""></option> -->
  			</select>
  			<select  ref="automanhourselect" @change="checkautomanhour">
  				<option value="min">分钟</option>
  				<option value="hour">小时</option>
  			</select>
  			<div class="close-automan-table" @click="closeAutomanTable">×</div>
  		</div>
  		<div class="automan-table-box" id="automan_detail"></div>
  	</div>
  	<div class='map-layer-right' v-show="currentType.title !== '台风'">
  		<div class='map-layer-content map-choose'>
  			<div class='title'>
  				<div class=''>地图切换</div>
  				<div class='fold' @click="foldLayer('map-choose', $event)"><span class='text'>收起</span><span class='fa fa-angle-up'></span></div>
  			</div>
  			<div class='content clear_float'>
  				<div v-for="(item, index) in mapLayer[1].content" @click="checkType(item)">
  					<div :class="[item.url, {'active': item.check}]"></div>
  					<div :class='{"active": item.check}'>{{item.mapType}}</div>
  				</div>
  			</div>
  		</div>
  		<div class='map-layer-content station-choose'>
  			<div class='title'>
  				<div class=''>图层叠加</div>
  				<div class='fold' @click="foldLayer('station-choose', $event)"><span class='text'>收起</span><span class='fa fa-angle-up'></span></div>
  			</div>
  			<div class='content clear_float'>
  				<div v-for="(item, index) in mapLayer[2].content" @click="checkType(item)">
  					<div :class="[item.url, {'active': item.check}]"></div>
  					<div :class='{"active": item.check}'>{{item.mapType}}</div>
  				</div>
  			</div>
  		</div>
  		<div class='map-layer-content automan-choose'  v-show='currentType.title === "自动站"'>
  			<div class='title'>
  				<div class=''>站点选择</div>
  				<div class='fold' @click="foldLayer('automan-choose', $event)"><span class='text'>收起</span><span class='fa fa-angle-up'></span></div>
  			</div>
  			<div class='content clear_float'>
  				<form class="station-type">
					<label><input type="checkbox" class="checkbox" checked @click.stop="chooseWatertype('1', $event)"><span class="icon icon-qixiang"></span><span class="text">气象</span></label>
					<label><input type="checkbox" class="checkbox" @click.stop="chooseWatertype('2', $event)"><span class="icon icon-shuili"></span><span class="text">水利</span></label>
				</form>
  			</div>
  		</div>
  		<div class='map-layer-content waterlevel-choose' v-show='currentType.title === "水位"'>
  			<div class='title'>
  				<div class=''>类型选择</div>
  				<div class='fold' @click="foldLayer('waterlevel-choose', $event)"><span class='text'>收起</span><span class='fa fa-angle-up'></span></div>
  			</div>
  			<div class='content clear_float'>
  				<form class="station-type">
					<label><input type="checkbox" class="checkbox" checked @click.stop="chooseWaterlevel('H', $event)"><span class="icon icon-hedao"></span><span class="text">河道</span></label>
					<label><input type="checkbox" class="checkbox" checked @click.stop="chooseWaterlevel('R', $event)"><span class="icon icon-shuiku"></span><span class="text">水库</span></label>
				</form>
  			</div>
  		</div>
  		<div class='map-layer-content automan-rank'  v-show='currentType.title === "自动站"'>
  			<div class='title'>
  				<div class=''>实况排行</div>
  				<div class='fold' @click="foldLayer('automan-rank', $event)"><span class='text'>收起</span><span class='fa fa-angle-up'></span></div>
  			</div>
  			<div class='content clear_float'>
  				<my-rank ref='rank'></my-rank>
  			</div>
  		</div>
  		<div class='map-layer-content waterlevel-rank'  v-show='currentType.title === "水位"'>  <!--需要修改-->
  			<div class='title'>
  				<div class=''>水位信息</div>
  				<div class='fold' @click="foldLayer('waterlevel-rank', $event)"><span class='text'>收起</span><span class='fa fa-angle-up'></span></div>
  			</div>
  			<div class='content clear_float'>
  				<div class='content-des'>
	  				水势图例： 涨（<span class='fa fa-arrow-up'></span>）落（<span class='fa fa-arrow-down'></span>）平（<span class='fa fa-minus'></span>）
	  			</div>
          <div class="tab" id="tab">
            <ul class="tab-title" id="tab-title">
              <li @click="handleTabs1" style="float: left;width: 50%;text-align: center;" :class="{active:this.show}">水库</li>
              <li @click="handleTabs2" style="float: left;width: 50%;text-align: center;" :class="{active:!this.show}">河道</li>
            </ul>
            <div class="tab-content" id="tab-content">
              <div v-show="show">
                <div class='content-detail' ref='contentdetail1'>
                </div>
                <my-page ref="page" :ranktype="rankWaterLevelType" :rankpages="rankpages" v-if="rankpages.allpage !== 0" @page-change="pagegoto"></my-page>
              </div>
              <div v-show="!show">
                <div class='content-detail' ref='contentdetail2'>
                </div>
                <my-page ref="page" :ranktype="rankWaterLevelType" :rankpages="rankpages" v-if="rankpages.allpage !== 0" @page-change="pagegoto"></my-page>
              </div>
            </div>
          </div>

  			</div>
  		</div>
  		<div class='map-layer-content product-add'   v-show='currentType.title === "自动站"'>
  			<div class='title'>
  				<div class=''>产品叠加</div>
  				<div class='fold' @click="foldLayer('product-add', $event)"><span class='text'>收起</span><span class='fa fa-angle-up'></span></div>
  			</div>
  			<div class='content clear_float'>
  				<div class='content_detail clear_float'>
					<div @click="ProduceAddRadar('基本', $event)">基本</div>
					<div @click="ProduceAddRadar('回波顶', $event)">回波顶</div>
					<div @click="ProduceAddRadar('固态水', $event)">固态水</div>
					<div @click="ProduceAddRadar('1小时估测', $event)">1小时估测</div>
					<div @click="ProduceAddRadar('3小时估测', $event)">3小时估测</div>
					<div @click="ProduceAddRadar('6小时估测', $event)">6小时估测</div>
  				</div>
  				<div class='content_color clear_float' v-html="productAddColor"></div>
  			</div>
  		</div>
  		<!-- <div class="map-layer-content warn-info" v-show="currentType.title === '预警'">
  			<div class='title'>
  				<div class=''>预警信息</div>
  				<div class='fold' @click="foldLayer('warn-info', $event)"><span class='text'>收起</span><span class='fa fa-angle-up'></span></div>
  			</div>
  			<div class="content clear_float">
  				<div>

  				</div>
  				<my-page ref="warnpage" :ranktype="rankWarnType" :rankpages="rankpages" v-if="rankpages.allpage !== 0" @page-change="warnpagegoto"></my-page>
  			</div>
  		</div> -->
  		<!-- <div class='map-layer-content region-choose'>
  			<div class='title'>
  				<div class="">区域选择</div>
  				<div class='fold' @click="foldLayer('region-choose', $event)"><span class='text'>收起</span><span class='fa fa-angle-up'></span></div>
  			</div>
  			<div class="content clear_float">
  				<div @click="showOther(true)">显示其他区域</div>
  				<div @click="showOther(false)">不显示其他区域</div>
  			</div>
  		</div> -->
  		<div class="map-layer-show-toggle" @click="toggleMapLayer">
			<span class='fa fa-angle-double-right'></span>
		</div>
  	</div>
  	<!-- <div class='check-radar'>
  		雷达
  	</div> -->
  	<common ref='common'></common>
  	<Fade>
  		<div
  		class="plugin"
  		v-show="isShow"
  		>
  			<div class="plugin-header">
					<h3>{{video.name}}——(双击放大或缩小)</h3>
					<span class="colse"  @click='videoClose'>X</span>
					<p v-show="isplugin"><a href="'http://10.137.128.94:8080/web/statics/HKWEB3.0.zip">你的浏览器没有安装插件,请点击下载</a></p>
					<!-- <p class="db-click">双击放大</p> -->
  			</div>

  			<div id="divPlugin">

  			</div>
  		</div>
  	</Fade>
    <Fade>
      <div class="waring" v-show="isWarning">
        <!-- <p>warning</p> -->
        <img src="../../static/images/monitor/waring.png" alt="">

      </div>

    </Fade>
  </div>
</template>

<script>
import $ from 'jquery'
import QXMap from 'QXMap'
import echarts from 'echarts'

import MyFactor from '../components/monitor/factor'
import MyRank from '../components/monitor/rank'
import common from '../components/common'
import MyPage from '../components/base/page'
import Fade from "../common/fade/FadeAnimation"
import { nowweatherColor, radarColor, moonColor, getMonitorRadar} from '../mock/mockdata.js'

let RegionObj = []
let map

const AREACODE = 330600000

export default {
	components: {
		MyFactor,
		MyRank,
		common,
		MyPage,
		Fade
	},
	mounted() {
		this.loadMap()
	},
	data() {
		return {
		  show: true,
      rsvrWater:[],
      riverWater:[],
			mapMask: '',
			isShow:false,
			isplugin:false,
      isWarning:false,
			video:{name:"test"},
			currentType: {
		      "id": 1,
		      "title": "天气",
		      "url": "weather",
		      "icon": "../../../static/images/monitor/tianqi.png",
		      "activeIcon": "../../../static/images/monitor/tianqi_active.png",
		      "active": true
		    },
			regionobj: [],
			hasWind: false,
			autoArr: [],
			lightArr: [],
			imageLayer: null,
			windS : [
            	[0.2,0],[1.5,1],[3.3,2],[5.4,3],[7.9,4],[10.7,5],[13.8,6],[17.1,7],
	        	[20.7,8],[24.4,9],[28.4,10],[32.6,11],[36.9,12],[41.4,13],[46.1,14],[50.9,15],
	       		[56.0,16],[61.2,17]
	    	],
	    	windD : [
	    		[11.25,"北风"],[33.75,"东北偏北风"],[56.25,"东北风"],[78.75,"东北偏东风"],[101.25,"东风"],[123.75,"东南偏东风"],[146.25,"东南风"],[168.75,"东南偏南风"],[191.25,"南风"], [213.75,"西南偏南风"],[236.25,"西南风"],[258.75,"西南偏西风"],[281.25,"西北偏西风"],[326.25,"西北风"],[348.75,"西北偏北风"],[1000,"西北偏北风"]
	    	],
	    	rankData: {
	    		data: [],
	    		type: []
	    	},
	    	monitortitle: [],
	    	waterlevelarr: {
	    		"R": [],
	    		"H": []
	    	},
	    	waterlevelInfo: {},
	    	currentColorBar: {},
	    	waterlevelChoose: ['R', 'H'],
	    	rankpages: {
				current: 1,
				showItem: 3,
				allpage: 0
			},
			rankWarn: [],
			rankWarnType: {name: '预警'},
			rankWaterlevel: [],
			rankWaterLevelType: { name: '水位'},
			showwaterlevelechart: false,
			showWarninfo: false,
			mapLayer: [
				{
					'name': '区域切换',
					'type': 'choose1',
					'check': false
				},
				{
					'name': '地图切换',
					'type': 'choose2',
					'typeOf': 'map',
					'content': [
						{'mapType': '卫星图', 'url': 'map1', 'check': false},
						{'mapType': '气象地图', 'url': 'map2', 'check': true},
						{'mapType': '地形图', 'url': 'map3', 'check': false}
					],
					'check': false
				},
				{
					'name': '图层叠加',
					'type': 'choose3',
					'typeOf': 'layer',
					'content': [
						{'mapType': '数值', 'url': 'layer1', 'check': true, 'typedetail': ''},
						{'mapType': '站点名', 'url': 'layer2', 'check': true, 'typedetail': ''},
						{'mapType': '地质灾害隐患点', 'url': 'layer3', 'check': false, 'typedetail': 'A1,A2,A3,'},
						{'mapType': '小流域危险点', 'url': 'layer4', 'check': false, 'typedetail': ''},
						{'mapType': '旅游景点', 'url': 'layer5', 'check': false, 'typedetail': ''},
						{'mapType': '避灾安置点', 'url': 'layer6', 'check': false, 'typedetail': 'B1,B2,B3,'},
						{'mapType': '农业大户', 'url': 'layer7', 'check': false, 'typedetail': ''},
						{'mapType': '矿区分布点', 'url': 'layer8', 'check': false, 'typedetail': ''},
						// {'mapType': '视频监控点', 'url': 'layer9', 'check': false, 'typedetail': ''},
						{'mapType': '重点防御单位', 'url': 'layer10', 'check': false, 'typedetail': ''}
					],
					'check': false
				},
				{
					'name': '图例',
					'type': 'choose4',
					'check': false
				},
				{
					'name': '排行',
					'type': 'choose5',
					'check': false
				},
			],
			showMapLayer: false,
			layerArr: [],
			waterType: ['1'],
			productAddColor: '',
			showAutomanTable: false,
			automanStationdata: [],
			windirection:[
				[11.25,"N"],[33.75,"NNE"],[56.25,"NE"],[78.75,"ENE"],[101.25,"E"],[123.75,"ESE"],[146.25,"SE"],[168.75,"SSE"],
				[191.25,"S"],
				[213.75,"SSW"],[236.25,"SW"],[258.75,"WSW"],[281.25,"WNW"],[326.25,"NW"],[348.75,"NNW"],[1000,"NNW"],
			]
		}
	},
	methods: {
		loadMap(){
			let that = this
			let height = $(window).height()
			let width = $(window).width() - 80

			$(".container-content").height(height)
			$('#factor').height(height)

	    	$('#container').height(height)
	    	$('#container').width(width)

	    	$('.monitor-wind').height(height)
	    	$('.monitor-wind').width(width)
	    	// 加载地图
	    	let option = {
	    	  isshowname:false,
			  weight: 4,
			  fillOpacity: 0,
			  fillColor: "#fff",
			  opacity: 1,
			  color: "red",
			  linestyle: 'solid' //dot
			}
			map = QXMap.Map('container', {
			  zoom: 10,
			  center: [120.5000,30.0700],
			  maptype: QMAP_NORMAL_MAP
			})
			let maker=QXMap.RegionLayer(AREACODE, option, (regionLayer) => {
//				//console.log(regionLayer, map)
			    map.addVectorLayer(regionLayer)
			    that.mapMask = regionLayer
			    // regionLayer.addMask(1)
			    map.fitBounds(regionLayer.getBound())
			    that.$options.methods.loadRegion()
			})
			// map.addMarkerLayer(maker)
		},
		loadRegion() {
			let reOption = {
        isshowname:false,
				weight: 1,
				fillOpacity: 0,
				fillColor: "#fff",
				opacity: 1,
				color: "#0077c8",
				linestyle: 'solid', //dot
			}
			let that = this
			QXMap.GetSubRegionCodeList(AREACODE, function (data){
			  console.log(data)
				for(let i=0;i<data.length;i++){
					QXMap.RegionLayer(data[i].shapecode, reOption, function (regionLayer) {
						map.addVectorLayer(regionLayer)
						RegionObj.push(regionLayer)
					},() => {
						that.regionclick()

					})
				}
			});
			this.regionobj = RegionObj
		},
		regionclick() {
			//console.log('点击乡镇')
		},
		onSuccessWind(data) {
			if(data.title === '台风'){
				this.hasWind = true
			}else{
				this.hasWind = false
			}
			this.currentType = data
		},
		drawAutoMap(res, fac, time, namefresh) {
//			console.log(time)
			if(time.length === 0){
				// 取消元素，该元素不为当前选择元素
				for(let i=0; i<this.monitortitle.length; i++){
					if(this.monitortitle[i].type === res[0].titleOfEn){
						this.monitortitle.splice(i, 1)
					}
				}
				let ele = Object.keys(fac)[0]
				//console.log(ele)
				let autoele = fac[ele]
				let autolabel = $("#container").find(".autoLabel").find('.auto'+ele)

				for(let i=0; i<autolabel.length; i++){
					autolabel[i].innerHTML = ''
				}
				this.$refs.rank.closeRank(ele)
			}else{
				let drawArray = {}
				let Arrays = Object.keys(res)
				this.rankData.data = res
				this.rankData.type = fac
				if(Arrays.length === 1){
					let typeArray = []
					for(let i=0; i<this.monitortitle.length; i++){
						if(this.monitortitle[i].type){
							typeArray.push(this.monitortitle[i].type)
						}
					}
					for(let i=0; i<this.monitortitle.length; i++){
						this.monitortitle[i].active = false
					}
					let title = {
						'name': '',
						'time': '',
						'type': '',
						'typedetail': '',
						'active': true
					}
					title.name = namefresh[time[0].type][0]
					title.typedetail = namefresh[time[0].type][2]
					let titleTimeType = namefresh[time[0].type][1]
					let titleTime = time[0].time
					title.type = time[0].type
					if(titleTimeType.match('-')){
						let timespan =titleTimeType.substring(0,titleTimeType.indexOf("-"))
						let timetype = titleTimeType.substring(timespan.length+1)
						//console.log(typeof(parseInt(timespan)))
						let timeB = titleTime.replace(/\-/g,'').replace(/\:/g,'').replace('.','').replace(" ",'').slice(0,12)+"00"
						let compare = parseInt(timespan)
						if(compare % 1 === 0){
							compare = 'pass'
						}else{
							compare = 'fail'
						}
						if(compare === 'pass'){
							// 往前推多久
							let middle = ''
							if(timetype === 'min'){
								middle = this.$refs.common.getTimeCShow(timeB, - timespan)
							}else if(timetype === 'hour'){
								middle = this.$refs.common.getTimeCShow(timeB, - timespan * 60)
							}else if(timetype === 'day'){
								middle = this.$refs.common.getTimeCShow(timeB, - timespan *60 *24)
							}
							if(timetype === 'day'){
								middle = middle.slice(0,4)+"-"+middle.slice(4,6)+"-"+middle.slice(6,8)
						    	title.time =  middle + " ~ " + titleTime.slice(0,10)
							}else{
								middle = middle.slice(0,4)+"-"+middle.slice(4,6)+"-"+middle.slice(6,8) + ' '+middle.slice(8,10)+":"+middle.slice(10,12)+":00"
						    	title.time = middle + " ~ " + titleTime.slice(0,19)
							}
							//console.log(middle)
						}else{
							// 以什么为起点
							timespan = titleTimeType.substring(timespan.length+1)
							timetype = titleTimeType.substring(0, titleTimeType.indexOf('-'))
							let middle = ''
							if(timetype === 'day'){
								middle = titleTime.slice(0,10)
								title.time = middle
							}else{
								if(parseInt(timeB.slice(8,10))>8 && parseInt(timeB.slice(8,10)) <=20){
									if(parseInt(timespan) === 8){
										middle = titleTime.slice(0,10) +" 08:00"
									}else if(parseInt(timespan) === 20){
										middle = this.$refs.common.getTimeCShow(timeB, -24*60)
										middle = middle.slice(0,4)+"-"+middle.slice(4,6)+"-"+middle.slice(6,8)+" "+"20:00"
									}
								}else if(parseInt(timeB.slice(8,10)) <= 8){
									middle = this.$refs.common.getTimeCShow(timeB, -24*60)
									if(parseInt(timespan) === 8){
										middle = middle.slice(0,4)+"-"+ middle.slice(4,6)+"-"+middle.slice(6,8) +" 08:00"
									}else if(parseInt(timespan) === 20){
										middle = middle.slice(0,4)+"-"+middle.slice(4,6)+"-"+middle.slice(6,8)+" "+"20:00"
									}

								}else if(parseInt(timeB.slice(8,10))> 20){
									if(parseInt(timespan) === 8){
										middle = titleTime.slice(0,10) +" 08:00"
									}else if(parseInt(timespan) === 20){
										middle = this.$refs.common.getTimeCShow(timeB, -24*60)
										middle = titleTime.slice(0,10)+"20:00"
									}
								}
								title.time = middle +' ~ '+titleTime.slice(0,16)
							}
						}
					}else{
						title.time = time[0].time.slice(0,19)
					}
					let index = typeArray.indexOf(time[0].type)
					if(index === -1){
						this.monitortitle.push(title)
					}else{
						this.monitortitle.splice(index, 1, title)
						for(let i=0; i<this.monitortitle.length; i++){
							if(i === (this.monitortitle.length-1)){
								this.monitortitle[i].active = true
							}
						}
					}
					this.$refs.rank.drawRankDetail(this.rankData, time, false)
					if(namefresh.refreshauto){
						// this.$refs.rank.drawRankDetail(this.rankData, time, true)
						// if(Arrays.length === 1){
							// 只剩最后一个元素时，并且该元素为被选中元素
							// this.$refs.rank.drawRankDetail(this.rankData, time, true)
							this.clearMap()
							for(let i in res){
							  console.log(i)
								for(let k=0; k<res[i].length; k++){
									if(!drawArray[res[i][k].Station_Id_C]){
										drawArray[res[i][k].Station_Id_C] = {}
									}
									drawArray[res[i][k].Station_Id_C][i] = res[i][k]
								}
							}
							for(let i in drawArray){
								let drawLength = Object.keys(drawArray[i])
								let facArray = []

								let lon = drawArray[i][drawLength[0]].Lon
								let lat = drawArray[i][drawLength[0]].Lat
								let stationName = drawArray[i][drawLength[0]].Station_name

								if(drawArray[i].water){
									if(parseInt(drawArray[i].water[fac.water]) === 0){
										facArray.push(0)
									}else{
										facArray.push(parseFloat(drawArray[i].water[fac.water]).toFixed(1))
									}
								}else{
									facArray.push('')
								}
								if(drawArray[i].temp){
									facArray.push(parseFloat(drawArray[i].temp[fac.temp]).toFixed(1))
								}else{
									facArray.push('')
								}
								if(drawArray[i].wind && drawArray[i].wind !== undefined){
									let windd = fac.wind.substring(0,fac.wind.indexOf(","));
									let winds = fac.wind.substring(windd.length+1);
									if(!windd.match('_D_')){
										winds = fac.wind.substring(0,fac.wind.indexOf(","));
										windd = fac.wind.substring(winds.length+1);
									}
									let speed
									let direction
									for(let k=0; k<this.windS.length; k++){
										if(parseFloat(drawArray[i].wind[winds]) < parseFloat(this.windS[k][0])){
											speed = this.windS[k][1] + "级"
											break
										}
									}
									for(let k=0; k<this.windD.length; k++){
										if(drawArray[i].wind[windd] === '-9999'){
											direction = ''
											break;
										}else{
											if(parseFloat(drawArray[i].wind[windd]) < parseFloat(this.windD[k][0])){
												direction = this.windD[k][1]
												break
											}
										}
									}
									facArray.push(direction)
									facArray.push(speed)
								}else{
									facArray.push('')
									facArray.push('')
								}
								if(drawArray[i].visi){
									facArray.push(parseInt(drawArray[i].visi[fac.visi]))
								}else{
									facArray.push('')
								}
								let imgsrc = '../../../static/images/monitor/qixiang_icon.png'
								if(drawArray[i].water){
									if(drawArray[i].water.tyCh === "1"){
										imgsrc = '../../../static/images/monitor/qixiang_icon.png'
									}else if(drawArray[i].water.tyCh === '2'){
										imgsrc = '../../../static/images/monitor/shuili_icon.png'
									}else{
										imgsrc = '../../../static/images/monitor/qixiang_icon.png'
									}
								}else{
									imgsrc = '../../../static/images/monitor/qixiang_icon.png'
								}
								let markoption
								if(!drawArray[i].water){
									markoption = {
										showlabel: false,
										label: '',
										htmlcontent: "<div class='autoLabel'><div><span class='autowater' stationId='"+i+"'>"+facArray[0]+"</span><span class='autotemp' stationId='"+i+"'>"+facArray[1]+"</span></div><div><span class='autowind' stationId='"+i+"'>"+facArray[3]+"</span><span class='autovisi' stationId='"+i+"'>"+facArray[4]+"</span></div></div><div class='autoImg' stationId='"+i+"'><img src='"+imgsrc+"' stationId='"+i+"' class='autopic'></div><div class='autoName' stationId='"+i+"'>"+stationName+"("+i+")</div>"
									}
								}else{
									if(drawArray[i].water.tyCh === "1"){
										markoption = {
											showlabel: false,
											label: '',
											htmlcontent: "<div class='autoLabel'><div><span class='autowater' stationId='"+i+"'>"+facArray[0]+"</span><span class='autotemp' stationId='"+i+"'>"+facArray[1]+"</span></div><div><span class='autowind' stationId='"+i+"'>"+facArray[3]+"</span><span class='autovisi' stationId='"+i+"'>"+facArray[4]+"</span></div></div><div class='autoImg' stationId='"+i+"'><img src='"+imgsrc+"' stationId='"+i+"'  class='autopic'></div><div class='autoName' stationId='"+i+"'>"+stationName+"("+i+")</div>"
										}
									}else if(drawArray[i].water.tyCh === "2"){
										markoption = {
											showlabel: false,
											label: '',
											htmlcontent: "<div class='autoLabel'><div><span class='autowater' stationId='"+i+"'>"+facArray[0]+"</span></div></div><div class='autoImg' stationId='"+i+"'><img src='"+imgsrc+"' stationId='"+i+"'  class='autopic'></div><div class='autoName' stationId='"+i+"'>"+stationName+"("+i+")</div>"
										}
									}
								}
								this.autoArr[i] = QXMap.PopupMarker({lng: lon, lat: lat}, markoption,function(){})
								map.addMarkerLayer(this.autoArr[i])
							}

						// }
					}else{
						// 切换要素或添加取消的元素，找出地图标签内该元素进行替代
						for(let i=0; i<this.lightArr.length; i++){
							map.removeMarkerLayer(this.lightArr[i])
						}
						for(let i in this.waterlevelarr){
							for(let k=0; k<this.waterlevelarr[i].length; k++){
								map.removeMarkerLayer(this.waterlevelarr[i][k])
							}
						}
						let ele = Object.keys(fac)[0]
						//console.log(ele)
						let autoele = fac[ele]
						let autolabel = $("#container").find(".autoLabel").find('.auto'+ele)
						for(let i=0; i<autolabel.length; i++){
							for(let k=0; k<res[ele].length; k++){
								if(res[ele][k].Station_Id_C === autolabel[i].attributes[1].nodeValue){
									if(ele === 'wind'){
										let windd = autoele.substring(0,autoele.indexOf(","));
										let winds = autoele.substring(windd.length+1);
										if(!windd.match('_D_')){
											winds = autoele.substring(0,autoele.indexOf(","));
											windd = autoele.substring(winds.length+1);
										}
										let speed
										let direction
										//console.log(winds, windd)
										//console.log(res[ele][k][winds], res[ele][k][windd])
										for(let j=0; j<this.windS.length; j++){
											if(parseFloat(res[ele][k][winds]) < parseFloat(this.windS[j][0])){
												speed = this.windS[j][1] + "级"
												break
											}
										}
										for(let j=0; j<this.windD.length; j++){
											if(res[ele][k][windd] === '-9999'){
												direction = ''
												break;
											}else{
												if(parseFloat(res[ele][k][windd]) < parseFloat(this.windD[j][0])){
													direction = this.windD[j][1]
													break
												}
											}
										}
										autolabel[i].innerHTML = speed
										//console.log(speed, direction)
									}else{
										if(ele !== 'visi'){
											if(parseInt(res[ele][k][autoele]) === 0){
												autolabel[i].innerHTML = '0'
											}else{
												autolabel[i].innerHTML = parseFloat(res[ele][k][autoele]).toFixed(1)
											}
										}else{
											autolabel[i].innerHTML = parseInt(res[ele][k][autoele])
										}
									}
									break
								}
							}
						}
					}

				}else{
					// 添加或者重画所有元素
					this.$refs.rank.drawRankDetail(this.rankData, time, true)
					this.monitortitle = []

					for(let i=0; i<time.length; i++){
						let title = {
							'name': '',
							'time': '',
							'type': '',
							'typedetail': '',
							'active': false
						}
						if(i === (time.length-1)){
							title.active = true
						}
						title.name = namefresh[time[i].type][0]
						title.typedetail = namefresh[time[i].type][2]
						title.type = time[i].type
						let titleTime = time[i].time

						let titleTimeType = namefresh[time[i].type][1]
						//console.log(titleTimeType)
						if(titleTimeType.match('-')){
							let timespan =titleTimeType.substring(0,titleTimeType.indexOf("-"))
							let timetype = titleTimeType.substring(timespan.length+1)
							//console.log(typeof(parseInt(timespan)))
							let timeB = titleTime.replace(/\-/g,'').replace(/\:/g,'').replace('.','').replace(" ",'').slice(0,12)+"00"
							let compare = parseInt(timespan)
							if(compare % 1 === 0){
								compare = 'pass'
							}else{
								compare = 'fail'
							}
							if(compare === 'pass'){
								// 往前推多久
								let middle = ''
								if(timetype === 'min'){
									middle = this.$refs.common.getTimeCShow(timeB, - timespan)
								}else if(timetype === 'hour'){
									middle = this.$refs.common.getTimeCShow(timeB, - timespan * 60)
								}else if(timetype === 'day'){
									middle = this.$refs.common.getTimeCShow(timeB, - timespan *60 *24)
								}
								if(timetype === 'day'){
									middle = middle.slice(0,4)+"-"+middle.slice(4,6)+"-"+middle.slice(6,8)
							    	title.time =  middle + " ~ " + titleTime.slice(0,10)
								}else{
									middle = middle.slice(0,4)+"-"+middle.slice(4,6)+"-"+middle.slice(6,8) + ' '+middle.slice(8,10)+":"+middle.slice(10,12)+":00"
							    	title.time = middle + " ~ " + titleTime.slice(0,19)
								}
								//console.log(middle)
							}else{
								// 以什么为起点
								timespan = titleTimeType.substring(timespan.length+1)
								timetype = titleTimeType.substring(0, titleTimeType.indexOf('-'))
								let middle = ''
								if(timetype === 'day'){
									middle = titleTime.slice(0,10)
									title.time = middle
								}else{
									if(parseInt(timeB.slice(8,10))>8 && parseInt(timeB.slice(8,10)) <=20){
										if(parseInt(timespan) === 8){
											middle = titleTime.slice(0,10) +" 08:00"
										}else if(parseInt(timespan) === 20){
											middle = this.$refs.common.getTimeCShow(timeB, -24*60)
											middle = middle.slice(0,4)+"-"+middle.slice(4,6)+"-"+middle.slice(6,8)+" "+"20:00"
										}
									}else if(parseInt(timeB.slice(8,10)) <= 8){
										middle = this.$refs.common.getTimeCShow(timeB, -24*60)
										if(parseInt(timespan) === 8){
											middle = middle.slice(0,4)+"-"+ middle.slice(4,6)+"-"+middle.slice(6,8) +" 08:00"
										}else if(parseInt(timespan) === 20){
											middle = middle.slice(0,4)+"-"+middle.slice(4,6)+"-"+middle.slice(6,8)+" "+"20:00"
										}

									}else if(parseInt(timeB.slice(8,10))> 20){
										if(parseInt(timespan) === 8){
											middle = titleTime.slice(0,10) +" 08:00"
										}else if(parseInt(timespan) === 20){
											middle = this.$refs.common.getTimeCShow(timeB, -24*60)
											middle = titleTime.slice(0,10)+"20:00"
										}
									}
									title.time = middle +' ~ '+titleTime.slice(0,16)
								}
							}
						}else{
							title.time = titleTime.slice(0,19)
						}
						this.monitortitle.push(title)
					}
					this.clearMap()
          //console.log(drawArray)
					for(let i in res){
					  console.log(i)
						for(let k=0; k<res[i].length; k++){
							if(!drawArray[res[i][k].Station_Id_C]){
								drawArray[res[i][k].Station_Id_C] = {}
							}
							drawArray[res[i][k].Station_Id_C][i] = res[i][k]
						}
					}
					for(let i in drawArray){
						let drawLength = Object.keys(drawArray[i])
						let facArray = []
            console.log(drawArray[i].Station_name)
						let lon = drawArray[i][drawLength[0]].Lon
						let lat = drawArray[i][drawLength[0]].Lat
						let stationName = drawArray[i][drawLength[0]].Station_name

						if(drawArray[i].water && drawArray[i].water[fac.water] !== '-9999'&& drawArray[i].water[fac.water] !== '-9999.0'){
							if(parseInt(drawArray[i].water[fac.water]) === 0){
								facArray.push(0)
							}else{
								//console.log(i + " " +drawArray[i].water[fac.water])
								if(drawArray[i].water[fac.water] === '-'||drawArray[i].water[fac.water]=== 'NaN'){
									facArray.push('-')
								}else{
									facArray.push(parseFloat(drawArray[i].water[fac.water]).toFixed(1))
								}

							}

						}else{
							facArray.push('-')
						}
						if(drawArray[i].temp&& drawArray[i].temp !== '-9999'&& drawArray[i].temp !== '-9999.0'){
							facArray.push(parseFloat(drawArray[i].temp[fac.temp]).toFixed(1))
						}else{
							facArray.push('-')
						}
						if(drawArray[i].wind && drawArray[i].wind !== undefined){
							let windd = fac.wind.substring(0,fac.wind.indexOf(","));
							let winds = fac.wind.substring(windd.length+1);
							if(!windd.match('_D_')){
								winds = fac.wind.substring(0,fac.wind.indexOf(","));
								windd = fac.wind.substring(winds.length+1);
							}
							let speed
							let direction
							for(let k=0; k<this.windS.length; k++){
								if(parseFloat(drawArray[i].wind[winds]) < parseFloat(this.windS[k][0])){
									speed = this.windS[k][1] + "级"
									break
								}
							}
							for(let k=0; k<this.windD.length; k++){
								if(drawArray[i].wind[windd] === '-9999'){
									direction = ''
									break;
								}else{
									if(parseFloat(drawArray[i].wind[windd]) < parseFloat(this.windD[k][0])){
										direction = this.windD[k][1]
										break
									}
								}
							}
							facArray.push(direction)
							facArray.push(speed)
						}else{
							facArray.push('-')
							facArray.push('-')
						}
						if(drawArray[i].visi&& drawArray[i].visi !== '-9999'&& drawArray[i].visi !== '-9999.0'){
							facArray.push(parseInt(drawArray[i].visi[fac.visi]))
						}else{
							facArray.push('-')
						}
						let imgsrc = '../../../static/images/monitor/qixiang_icon.png'
						if(drawArray[i].water){
							if(drawArray[i].water.tyCh === "1"){
								imgsrc = '../../../static/images/monitor/qixiang_icon.png'
							}else if(drawArray[i].water.tyCh === '2'){
								imgsrc = '../../../static/images/monitor/shuili_icon.png'
							}else{
								imgsrc = '../../../static/images/monitor/qixiang_icon.png'
							}
						}else{
							imgsrc = '../../../static/images/monitor/qixiang_icon.png'
						}
						let markoption
						if(!drawArray[i].water){
							markoption = {
								showlabel: false,
								label: '',
								htmlcontent: "<div class='autoLabel'><div><span class='autowater' stationId='"+i+"'>"+facArray[0]+"</span><span class='autotemp' stationId='"+i+"'>"+facArray[1]+"</span></div><div><span class='autowind' stationId='"+i+"'>"+facArray[3]+"</span><span class='autovisi' stationId='"+i+"'>"+facArray[4]+"</span></div></div><div class='autoImg' stationId='"+i+"'><img src='"+imgsrc+"' stationId='"+i+"'  class='autopic'></div><div class='autoName' stationId='"+i+"'>"+stationName+"("+i+")</div>"
							}
						}else{
							if(drawArray[i].water.tyCh === "1"){
								markoption = {
									showlabel: false,
									label: '',
									htmlcontent: "<div class='autoLabel'><div><span class='autowater' stationId='"+i+"'>"+facArray[0]+"</span><span class='autotemp' stationId='"+i+"'>"+facArray[1]+"</span></div><div><span class='autowind' stationId='"+i+"'>"+facArray[3]+"</span><span class='autovisi' stationId='"+i+"'>"+facArray[4]+"</span></div></div><div class='autoImg' stationId='"+i+"'><img src='"+imgsrc+"' stationId='"+i+"'  class='autopic'></div><div class='autoName' stationId='"+i+"'>"+stationName+"("+i+")</div>"
								}
							}else if(drawArray[i].water.tyCh === "2"){
								markoption = {
									showlabel: false,
									label: '',
									htmlcontent: "<div class='autoLabel'><div><span class='autowater' stationId='"+i+"'>"+facArray[0]+"</span></div></div><div class='autoImg' stationId='"+i+"'><img src='"+imgsrc+"' stationId='"+i+"'  class='autopic'></div><div class='autoName' stationId='"+i+"'>"+stationName+"("+i+")</div>"
								}
							}
						}
						this.autoArr[i] = QXMap.PopupMarker({lng: lon, lat: lat}, markoption,function(){})
						map.addMarkerLayer(this.autoArr[i])
					}
//          console.log(77777)
//          this.loadRegion()
				}
			}
		},
		drawLight(res, comA, comB){
			this.clearMap()
			let title = {
				'name': '闪电',
				'time': ''
			}
			//console.log(comA, comB)
			let timeA = this.$refs.common.formatDateTime(comA)
			let timeB = this.$refs.common.formatDateTime(comB)
			title.time = timeB.slice(0,19) + " ~ " + timeA.slice(0,19)
			this.monitortitle = []
			this.monitortitle.push(title)

			let iconColor = ""
			for(let i=0; i<res.length; i++){
				if(res[i].Lit_Current>0){
					iconColor = "red"
				}else{
					iconColor = "blue"
				}
				let markoption = {
					showlabel: false,
					label: '',
					htmlcontent: "<div class='lightLabel'><div class='fa fa-bolt' style='color: "+iconColor+"'></div><div>"+res[i].Lit_Current+"</div></div>"
				}
				this.lightArr[i] = QXMap.PopupMarker({lng: res[i].Lon, lat: res[i].Lat}, markoption,function(){})
				map.addMarkerLayer(this.lightArr[i])
			}
//			console.log(2323)
//      map.setZoom(12)
//      map.setCenter([120.5000,30.0700])
//			this.loadRegion(o)
//      this.loadMap()
		},
		drawRadar(res, fac, time) {
			let title = {
				'name': '',
				'time': '',
				'active': true
			}
			title.time = time.slice(0,19)
			title.name = res.titleOf + ' - ' + res.name

			if(this.currentType.title === '自动站'){
				map.removeTileLayer(this.imageLayer)
				QXMap.removeVectorMapProduct()
				QXMap.removeGridMapProduct()
				for(let i=0; i<this.monitortitle.length; i++){
					this.monitortitle[i].active = false
					if(this.monitortitle[i].name.match('-')){
						this.monitortitle.splice(i, 1)
					}
				}
				this.monitortitle.push(title)
				for(let i in radarColor){
					if(i === res.colorType){
						let string = ''
						for(let j=0; j<radarColor[i].color.length; j++){
							string = string + "<div><div style='background: "+ radarColor[i].color[j] +"'></div><div>"+radarColor[i].text[j]+"</div></div>"
						}
						this.productAddColor = string
					}
				}
			}else{
				this.monitortitle = []
				this.monitortitle.push(title)
				this.clearMap()
				for(let i in radarColor){
		        	if(i === res.colorType){
		        		this.colorBar(radarColor[i], res.name, 'type1')
		        		break
		        	}else{
		        		this.$refs.colorbartitle.innerHTML = ''
		        		this.$refs.colorbardetail.innerHTML = ''
		        	}
		        }
			}

			if(res.titleOf === '雷达回波'){
				this.imageLayer = QXMap.addImageProduct(fac)
				map.addTileLayer(this.imageLayer)
			}else if(res.titleOf === '降水'){
				QXMap.addVectorMapProduct(fac, function (data) {
		            if (data == null) return
		        });
			}
		},
		drawMoon(res, fac) {
			//console.log(res, fac)
			this.clearMap()
			let title = {
				'name': '',
				'time': ''
			}
			title.time = res.slice(0,19)
			title.name = fac.titleOf + ' - ' + fac.name
			this.monitortitle = []
			this.monitortitle.push(title)

			let time = res.replace(/\-/g,'').replace(/\:/g,"").replace(" ","")
			this.imageLayer = QXMap.SateLayer(fac.type,time)
	        map.addTileLayer(this.imageLayer)

	        for(let i in moonColor){
	        	if(i === fac.colorType){
	        		this.colorBar(moonColor[i], fac.name, 'type1')
	        		break
	        	}else{
	        		this.$refs.colorbartitle.innerHTML = ''
	        		this.$refs.colorbardetail.innerHTML = ''
	        	}
	        }
		},
		drawForecast(res, time, fac) {
			this.clearMap()
			let title = {
				'name': '',
				'time': ''
			}
			if(fac.timespan.match('-')){
				let endTime = time.replace(/\-/g,'').replace(' ','').replace(/\:/g,'')
				let startTime = this.$refs.common.getTimeCShow(endTime, -fac.num*60)
				//console.log(startTime)
				startTime = startTime.slice(0,4) +"-"+ startTime.slice(4,6) +"-"+ startTime.slice(6,8) +" "+startTime.slice(8,10) +":"+startTime.slice(10,12)+":00"
				//console.log(endTime, startTime)
				title.time = startTime+" ~ "+time.slice(0,19)
			}else{
				title.time = time.slice(0,19)
			}
			title.name = fac.titleOf + " - " + fac.name
			this.monitortitle = []
			this.monitortitle.push(title)
			let that = this
			QXMap.addVectorMapProduct(res, function (data) {
				that.currentColorBar = data.getColorBar()
				that.colorBar(that.currentColorBar, fac.name, 'type0')
	            if (data == null) return

	            if (typeof callback === "function") {
	                callback(data)
	            }
	        })
		},
		clearMap() {
			map.removeTileLayer(this.imageLayer)
			QXMap.removeVectorMapProduct()
			QXMap.removeGridMapProduct()
//      this.isWarning = false
			for(let i in this.autoArr){
//			  console.log(i)
				map.removeMarkerLayer(this.autoArr[i])
			}
			this.autoArr = [];
			for(let i=0; i<this.lightArr.length; i++){
				map.removeMarkerLayer(this.lightArr[i])
			}
			for(let i in this.waterlevelarr){
				for(let k=0; k<this.waterlevelarr[i].length; k++){
					map.removeMarkerLayer(this.waterlevelarr[i][k])
				}
			}
		},
		weatherChange(res) {
			this.clearMap()
			let title = {
				'name': '现在天气',
				'time': ''
			}
			title.time = res.time.slice(0,4) +"-"+ res.time.slice(4,6) +"-"+res.time.slice(6,8) +" "+res.time.slice(8,10)+":"+res.time.slice(10,12)
			this.monitortitle = []
			this.monitortitle.push(title)
			let that = this
			QXMap.addVectorMapProduct(res, function (data) {
				that.currentColorBar = data.getColorBar()
				that.colorBar(that.currentColorBar, 'nowweather', 'type0')
	            if (data == null) return
			})
		},
    // 需修改
    handleTabs1(){
		  this.show=true
      this.rankWaterlevel=this.rsvrWater
      this.pagegoto(1)
      console.log(this.rsvrWater)
    },
    handleTabs2(){
      this.show=false
      this.rankWaterlevel=this.riverWater
      this.pagegoto(1)
    },
		drawWaterlevel(res, time) {
			this.waterlevelInfo = res
      console.log(33333)
			this.clearMap()
			let title = {
				'name': '水位',
				'time': ''
			}
			title.time = time.slice(0,19)
			this.monitortitle = []
			this.monitortitle.push(title)
      for (var i = 0; i < res.length; i++) {

        var markoption = {
          showlabel: false,
          label: '',
          //name:JSON.stringify(res[i]),
          //ip:res[i].ip,
          htmlcontent: "<div class='autoLabel'><span class='autotemp'>"+res[i].Reservoir_level+"</span><br><span class='autowater'>"+res[i].Station_name+"</span></div>"
        }
        this.autoArr[i] = QXMap.PopupMarker({lng: res[i].Lon, lat: res[i].Lat}, markoption)
        // this.autoArr[i].addEventListener("click",(e)=> {
        //   let obj = JSON.parse(e.target.name)
        //
        // })
        map.addMarkerLayer(this.autoArr[i])
      }
//			this.loadRegion()
			this.drawWaterlevelTable(res)
		},
		colorBar(res, typename, type){
			//console.log(res)
			let keys = Object.keys(res)
			keys = keys.sort(function(a,b){
				return a-b
			})
			if(typename === 'nowweather'){
				this.$refs.colorbartitle.innerHTML = '现在天气'
				let string = ''
				for(let j=0; j<keys.length; j++){
					for(let i in res){
						if(i === keys[j]){
							for(let k in nowweatherColor){
								if( Math.ceil(i) === parseInt(k)){
									string = string + "<div><div style='background: "+ res[i] +"'></div><div>"+nowweatherColor[k]+"</div></div>"
									break
								}
							}
						}
					}
				}
				this.$refs.colorbardetail.innerHTML = string
			}else{
				if(type === 'type0'){
					this.$refs.colorbartitle.innerHTML = typename
					let string = ''
					for(let j=0; j<keys.length; j++){
						for(let i in res){
							if(keys[j] === i){
								if(i % 1=== 0){
									string = string + "<div><div style='background: "+ res[i] +"'></div><div>"+parseInt(i)+"</div></div>"
								}else{
									string = string + "<div><div style='background: "+ res[i] +"'></div><div>"+parseFloat(i).toFixed(1)+"</div></div>"
								}
							}

						}
					}

					this.$refs.colorbardetail.innerHTML = string
				}else if(type === 'type1'){
					let string = ''
					this.$refs.colorbartitle.innerHTML = typename
					for(let i=0; i<res.color.length; i++){
						string = string + "<div><div style='background: "+ res.color[i] +"'></div><div>"+res.text[i]+"</div></div>"
					}
					this.$refs.colorbardetail.innerHTML = string
				}
			}
		},
		chooseWaterlevel(type, event) {
			//console.log(event)
			let index = this.waterlevelChoose.indexOf(type)
			if(index === -1){
				this.waterlevelChoose.push(type)
			}else{
				this.waterlevelChoose.splice(index, 1)
			}
			this.drawWaterlevelTable(this.waterlevelChoose)
		},
		drawWaterlevelTable(res) {
			//console.log(res)
			let waterlevellabel = $("#container").find(".waterlevelLabel")
			for(let k=0; k<waterlevellabel.length; k++){
				let type = waterlevellabel[k].attributes[2].nodeValue
				if(this.waterlevelChoose.indexOf(type) === -1){
					waterlevellabel[k].setAttribute('style', 'display: none')
				}else{
					waterlevellabel[k].setAttribute('style', 'display: block')
				}
			}

			// let dataArr = []
			// for(let i in this.waterlevelInfo){
			// 	if(this.waterlevelChoose.indexOf(i) !== -1){
			// 		for(let k=0; k<this.waterlevelInfo[i].length; k++){
			// 			dataArr.push(this.waterlevelInfo[i][k])
			// 		}
			// 	}
            //
			// }
			// dataArr.sort(this.$refs.common.compare2('Z'))
			// this.rankWaterlevel = dataArr
			// this.rankpages.allpage = Math.ceil( dataArr.length / 10 )
			// this.rankpages.current = 1
			this.pagegoto(1)
		},
    showRsvrWater(res){
      this.rsvrWater=res
      this.rankWaterlevel=res
      this.pagegoto(1)
    },
    showRiverWater(res){
      //console.log('河道'+res)
       this.riverWater=res
    },
		pagegoto(index) {
			if(index !== 0){
				let dataArr = this.rankWaterlevel
				let min = (index -1) * 10
				let max = min + 10
				let chooseData = []
				for(let i=min; i<max; i++){
					if(dataArr[i]){
						chooseData.push(dataArr[i])
					}
				}
				let string = '<div class="clear_float"><div>序号</div><div>测站名</div><div>水位（m）</div><div>水势</div><div>警戒/汛限（m）</div><div>超警戒/汛限（m）</div></div>'
				for(let i=0; i<chooseData.length; i++){
					let num = (index-1)*10 + (i+1)
					let sign = chooseData[i].status
					if(sign === '2'){
						sign = 'fa-arrow-up'
					}else if(sign === '1'){
						sign = 'fa-arrow-down'
					}else if(sign === '0'){
						sign = 'fa-minus'
					}
					string= string+"<div class='clear_float'><div>"+num+"</div><div>"+chooseData[i].stationName+"</div><div>"+chooseData[i].level+"</div><div><span class='fa "+sign+"'></span></div><div>"+chooseData[i].warnLevel+"</div><div>"+chooseData[i].over+"</div></div>"
				}
				if(this.show){
          this.$refs.contentdetail1.innerHTML = string
        }else{
          this.$refs.contentdetail2.innerHTML = string
        }

			}
		},
		warnpagegoto(index) {
			//console.log(index)
			// if(index !== 0){
			// 	let dateArr = this.rankWarn
			// 	let min = (index - 1) * 10
			// 	let max = min + 10
			// 	let choose = []
			// 	for(let i=min; i<max; i++){

			// 	}
			// }
			// 暂定
		},
    // 需修改
		clickWaterlevel(event) {
			if(event.target.nodeName === 'DIV' || event.target.nodeName === 'IMG' ||event.target.nodeName === 'SPAN'){
				if(event.target.className.match('waterlevel')){
					this.showWarninfo = false
					this.showwaterlevelechart = true
					this.showAutomanTable = false
					let stationid = event.target.attributes[1].nodeValue
					//console.log(this.monitortitle)
					let time = this.monitortitle[0].time.replace(/\-/g,'').replace(' ','').replace(/\:/g,'').slice(2,12)
					let urls = 'http://172.21.129.156:8081/web/rain/reservoirByTimeAndStation?stationId='+stationid+'&startime='+time
					this.$http.get(urls)
					.then((res) => {
						let timeArr = []
						let dataArr = []
						let markdata = res.body.DS[0].MAX_Z
						let min = 0
						let max = markdata
						let title = res.body.DS[0].STNM + "("+ res.body.DS[0].TYPE +")"
						let colorType = '#25BE19'
						if(res.body.DS[0].TYPE === '河道'){
							colorType = '#3E4DED'
						}
						for(let i=0; i<res.body.DS.length; i++){
							timeArr.push(res.body.DS[i].TM.slice(11,13) + '时')
							dataArr.push(res.body.DS[i].Z)
							if(min > res.body.DS[i].Z){
								min = res.body.DS[i].Z
							}
							if(max < res.body.DS[i].Z){
								max = res.body.DS[i].Z
							}
						}
						max = Math.ceil( max + 5)
						let myChart = echarts.init(document.getElementById('wlChart'))
						myChart.clear()
						let option = {
							title: {
								text: title,
								left: 20,
								top: 10
							},
							tooltip: {
						        trigger: 'axis'
						    },
							grid: {
					        	show: false,
					        	left: 60,
					            right: 50,
					            bottom: 40,
					            top: 60
					        },
							toolbox: {
							    show: true,
							    feature: {
							        magicType: {type: ['line', 'bar']},
							        restore: {},
							        saveAsImage: {}
							    },
							    top: 10,
							    right: 40
							},
							xAxis:  {
						        type: 'category',
						        boundaryGap: true,
						        data: timeArr
						    },
						    yAxis: {
						        type: 'value',
						        axisLabel: {
						            formatter: '{value} m'
						        },
						        min: min,
						        max: max
						    },
						    series: [{
						    	name: '水位',
						    	type: 'line',
						    	data: dataArr,
						    	itemStyle: {
						    		color: colorType,
						    	},
						    	markLine: {
						    		data: [
						    			{name: '阈值', yAxis: markdata}
						    		],
						    		lineStyle: {
						    			type: 'dotted',
						    			color: colorType
						    		}
						    	}
						    }]
						}
						myChart.setOption(option)
					},(err) => {
						//console.log(err)
					})
				}else if(event.target.className.match('warnlabel')){
					this.showWarninfo = true
					this.showwaterlevelechart = false
					this.showAutomanTable = false
					//console.log(event)
					if(event.target.nodeName === 'IMG'){
						let left = event.pageX + 20
						let top = event.pageY
						$(".warnInfo").css({ 'left': left, 'top': top})
						this.showWarninfo = true
						let string = event.target.attributes[1].value
						$(".warnInfoContent").html(string)
					}
				}else if(event.target.className.match('layerlabel')){
					this.showwaterlevelechart = false
					this.showWarninfo = true
					this.showAutomanTable = false
					let left = event.pageX + 20
					let top = event.pageY
					$(".warnInfo").css({ 'left': left, 'top': top})
					//console.log(event.target.attributes[1].value)
					let infodata = JSON.parse(event.target.attributes[1].value)
					let info = "<div>"+infodata.name+"("+infodata.typename+")</div>"
						+"<div>负责人:"+infodata.contact+"</div>"
						+"<div>负责人电话:"+infodata.tel+"</div>"
						+"<div>数据出处:"+infodata.datasour+"</div>"
					$(".warnInfoContent").html(info)
				}else if(event.target.className.match('auto')){
					if(event.target.attributes[1].name === 'stationid' && event.target.attributes[1].nodeValue){
						this.showAutomanTable = true
						this.showwaterlevelechart = false
						this.showWarninfo = false
						let labelid = event.target.attributes[1].nodeValue
						//console.log(this.$refs.automanselect.value)
						let name = ''
						if(this.$refs.automanselect.value === 'Precipitation'){
							name = '降雨'
						}else if(this.$refs.automanselect.value === 'WindVelocity'){
							name = '风向 风速'
						}else{
							name = '温度'
						}

						console.log(22)
						this.showautomantable(labelid, this.$refs.automanselect.value, name)
					}
				}else{
					this.showwaterlevelechart = false
					this.showWarninfo = false
					this.showAutomanTable = false
				}
			}else{
				this.showwaterlevelechart = false
				this.showWarninfo = false
				this.showAutomanTable = false
			}
		},
		closewaterlevelchart() {
			this.showwaterlevelechart = false
		},
		drawWarn(res) {
			let time = this.$refs.common.getthisTime(),
        n = null;
			time = time.slice(0,4)+"-"+time.slice(4,6)+"-"+time.slice(6,8)+" "+time.slice(8,10)+":"+time.slice(10,12)
			let title = {
				'name': '预警信息',
				'time': ''
			}
			title.time = time
			this.monitortitle = []
			this.monitortitle.push(title)
			this.clearMap()
			for(let i=0; i<res.length; i++){
				let imgDiv = ''
				for(let k=0; k<res[i].warninfo.length; k++){
				  n = 1
				  console.log(res[i].warninfo)
					let weatherArr = [['暴雪', 'bx'], ['冰雹', 'bb'], ['暴雨', 'by'],['大风', 'df'],['道路结冰','dljb'],['大雾', 'dw'],['干旱', 'gh'], ['高温', 'gw'], ['寒潮', 'hc'],['雷电', 'ld'],['霾', 'li'],['沙尘暴','scb'],['霜冻','sd'],['台风','tf'],['台风报告单','tfbgd']]
					let colorArr = [['红','red'],['橙','orange'],['黄', 'yellow'],['蓝', 'blue']]
					let weather = ''
					let color = ''
					//console.log(weatherArr.length)
					for(let j=0; j<weatherArr.length; j++){
						if(res[i].warninfo[k].yjch.match(weatherArr[j][0])){
							weather = weatherArr[j][1]
						}
					}
					for(let j=0; j<colorArr.length; j++){
						if(res[i].warninfo[k].yjch.match(colorArr[j][0])){
							color = colorArr[j][1]
						}
					}
					let imgsrc = '<img class="warnlabel img" datainfo="'+res[i].warninfo[k].yjcontent+'" src="../../static/images/warnicon/'+weather+'_'+color+'.jpg">'
					imgDiv = imgDiv + imgsrc
				}
				let markoption = {
		          showlabel: false,
		          label: '',
		          htmlcontent: "<div  class='warnlabel'>"+imgDiv+"</div>"
		        }
				this.lightArr[i] = QXMap.PopupMarker({lng: res[i].lon, lat: res[i].lat}, markoption,function(){})
    			map.addMarkerLayer(this.lightArr[i])
			}
			console.log(res,n)
      if(!n)
        this.isWarning = true
//			console.log(2222222)
//      this.loadRegion()
			this.rankWarn = res
			this.rankpages.allpage = Math.ceil( res.length / 10 )
			this.rankpages.current = 1
			this.warnpagegoto(1)
		},
		closeWarnInfo() {
			this.showWarninfo = false
		},
		checkLayer(res) {
			for(let i=0; i<this.mapLayer.length; i++){
				this.mapLayer[i].check = false
			}
			res.check = true
		},
		checkType(res){
			//console.log(res)
			if(res.url.match('map')){
				for(let i=0; i<this.mapLayer.length; i++){
					if(this.mapLayer[i].content){
						if(res.url.match(this.mapLayer[i].typeOf)){
							for(let j=0; j<this.mapLayer[i].content.length; j++){
								this.mapLayer[i].content[j].check = false
							}
						}
					}
				}
				res.check = true
				if(res.mapType === '卫星图'){
					map.changeMap(QMAP_SATELLITE_MAP)
				}else if(res.mapType === '气象地图'){
					map.changeMap(QMAP_NORMAL_MAP)
				}else if(res.mapType === '地形图'){
					map.changeMap(QMAP_RELIEF_MAP)
				}
			}else{
				res.check = !res.check
				let string = ''
				if(res.mapType === '数值'){
					if(res.check){
						$("#container").find('.autoLabel').css({'visibility': 'visible'})
					}else{
						$("#container").find('.autoLabel').css({'visibility': 'hidden'})
					}
				}else if(res.mapType === '站点名'){
					if(res.check){
						$("#container").find('.autoName').css({'visibility': 'visible'})
					}else{
						$("#container").find('.autoName').css({'visibility': 'hidden'})
					}
				}else{
					if(res.url.match('layer')){
						for(let i=0; i<this.mapLayer.length; i++){
							if(this.mapLayer[i].content){
								for(let j=0;j<this.mapLayer[i].content.length; j++){
									if(this.mapLayer[i].content[j].mapType !== '数值' && this.mapLayer[i].content[j].mapType !== '站点名'){
										if(this.mapLayer[i].content[j].check && this.mapLayer[i].content[j].typedetail){
											string = string + this.mapLayer[i].content[j].typedetail
										}
									}
								}
							}
						}
						//console.log(string)
						for(let i=0; i<this.layerArr.length; i++){
							map.removeMarkerLayer(this.layerArr[i])
						}
						if(string){
							let url = "http://172.21.129.156:8081/web/rain/stenciInfo?type="+ string
							this.$http.get(url)
							.then((resData) => {
								// let resData = [{"id":9,"name":"阜山乡周山村","typename":"滑坡","city":"丽水","county":"青田县","town":"阜山乡","lon":"120.209166","lat":"28.0775","contact":"吴孝龙","tel":"15157836166","datasour":"国土局","address":"","type":"A2"},{"id":10,"name":"贵岙乡贵岙村泉坑自然村","typename":"滑坡","city":"丽水","county":"青田县","town":"贵岙乡","lon":"120.351666","lat":"28.188333","contact":"周文蔡","tel":"13157863635","datasour":"国土局","address":"","type":"A2"}]
								// this.drawMapLayer(resData)
								this.drawMapLayer(resData.body.DS)
							},(err) => {

							})
						}
					}
				}
			}
		},
		toggleLayer() {
			this.showMapLayer = !this.showMapLayer
		},
		drawMapLayer(res) {
//			console.log(res)
			for(let i=0; i<res.length; i++){
				let string = JSON.stringify(res[i])
				let img = '../../../static/images/monitor/'
				if(res[i].type.match("A")){
					img = img + "A.png"
				}else if(res[i].type.match("B")){
					img = img + "B.png"
				}else{
					img = ''
				}
				let markoption = {
		          showlabel: false,
		          label: '',
		          htmlcontent: "<div  class='layerlabel' datainfo='"+string+"'><img class='layerlabel' datainfo='"+string+"' src='"+img+"'></div><div class='layerlabel' datainfo='"+string+"'>"+res[i].name+"("+res[i].typename+")</div>"
		        }
				this.layerArr[i] = QXMap.PopupMarker({lng: res[i].lon, lat: res[i].lat}, markoption,function(){})
				map.addMarkerLayer(this.layerArr[i])
			}
//			console.log(3333333)
//      this.loadRegion()
    },
		chooseWatertype(type, event) {
			//console.log(type, event)
//      if(type == 2)
//        return
			let index = this.waterType.indexOf(type)
			if(index === -1){
				this.waterType.push(type)
			}else{
				this.waterType.splice(index, 1)
			}
			let string = ''
			for(let i=0; i<this.waterType.length; i++){
				string = string  + this.waterType[i] + ","
			}
			//console.log(string)
			this.$refs.factor.checkWaterType(string)
		},

		//环境站
		envData(data,envData, currentType,time){
			this.clearMap();
			let type = envData.type
			this.currentType = currentType
			this.monitortitle = [{
				name:envData.name,
				time:time.slice(0, -5)
			}]

			for (var i = 0; i < data.length; i++) {
        let imgsrc = '../../../static/images/monitor/qixiang_icon.png';
        var markoption = {
						showlabel: false,
						label: '',
						name:JSON.stringify(data[i]),
						ip:data[i].ip,
            htmlcontent:(data[i][type]=='-9999.0000')?"": "<div class='autoLabel'><div><span class='autotemp'>"+parseFloat(data[i][type]).toFixed(2)+"</span> </div> </div> <div class='autoImg' stationId='"+i+"'> <img src='"+imgsrc+"' stationId='"+i+"'  class='autopic'> </div> <div class='autoName' stationId='"+i+"'><span>"+data[i].Station_name+"</span> </div>"
					}
					this.autoArr[i] = QXMap.PopupMarker({lng: data[i].Lon, lat: data[i].Lat}, markoption)
					this.autoArr[i].addEventListener("click",(e)=> {
						let obj = JSON.parse(e.target.name)

					})
					map.addMarkerLayer(this.autoArr[i])
				}


		},
		//视频监控
		videoChange(res){
			this.clearMap()
			this.monitortitle=[{name:'视频监控',time:""}]
			if(res.code == 0){
				var  data = res.monitors;
				//console.log("video",data)
				let img = '../../../static/images/monitor/'+ "A.png"
				for (var i = 0; i < data.length; i++) {

					var markoption = {
						showlabel: false,
						label: '',
						name:JSON.stringify(data[i]),
						ip:data[i].ip,
						htmlcontent: "<div class='video-content' id="+data[i].ip+"><b class='fa fa-video-camera video-img'></b><br><span>"+data[i].name+"</span></div>"
					}
					this.autoArr[i] = QXMap.PopupMarker({lng: data[i].lat, lat: data[i].lng}, markoption)
					this.autoArr[i].addEventListener("click",(e)=> {
						let obj = JSON.parse(e.target.name)
						this.sendVideo(obj)

					})
					map.addMarkerLayer(this.autoArr[i])
				}
//				console.log(4545)
//        this.loadRegion()

			}
		},
		//监控
		sendVideo(obj){
			console.log(obj)
			var iRet = WebVideoCtrl.I_CheckPluginInstall();

			// //console.log(iRet)
			// alert(iRet)
      if (-1 == iRet) {
         this.isplugin = true;
          return;
      }
//      this.clickLogout()
      // WebVideoCtrl.I_StopRecord()
      // //console.log(obj)
      this.video = obj
      this.isplugin = false
      this.isShow = true;
      var oPlugin = {
          iWidth: 600,             // plugin width
          iHeight: 400             // plugin height
      };
      // alert(obj.ip)
      	// alert(obj.ip)
			//初始化参数
			var oLiveView = {
        iProtocol: 1,            // protocol 1：http, 2:https
        szIP1: obj.ip,    // protocol ip
        szPort: obj.port,            // protocol port
        szUsername: obj.user,     // device username
        szPassword: obj.pwd, // device password
        iStreamType: 1,          // stream 1：main stream  2：sub-stream  3：third stream  4：transcode stream
        iChannelID: 1,           // channel no
        bZeroChannel: false      // zero channel
      };
      //初始化插件参数及插入插件
      WebVideoCtrl.I_InitPlugin(oPlugin.iWidth, oPlugin.iHeight, {
        bWndFull: true,//是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        iWndowType: 1,
        cbInitPluginComplete: function () {
            WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
            // 检查插件是否最新
            if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
                alert("检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！");
                return;
            }
        }
      });

       // 登录设备
        WebVideoCtrl.I_Login(oLiveView.szIP1, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
            success: function (xmlDoc) {

                // 开始预览
                var szDeviceIdentify = oLiveView.szIP1 + "_" + oLiveView.szPort;
                setTimeout(function () {
                    WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
                        iStreamType: oLiveView.iStreamType,
                        iChannelID: oLiveView.iChannelID,
                        bZeroChannel: oLiveView.bZeroChannel
                    });
                }, 1000);
            }
        });
		},
		//关闭窗口
		videoClose(){
			this.isShow = false
			// 关闭浏览器
      // $(window).unload(function () {

      // });
      this.clickLogout()

		},
		//退出监控登录
		clickLogout() {
	    var szDeviceIdentify = this.video.ip
	    if (null == szDeviceIdentify) {
	        return;
	    }
	    var iRet = WebVideoCtrl.I_Logout(szDeviceIdentify);
	    if (0 == iRet) {
	    }
	    WebVideoCtrl.I_Stop();
		},
		foldLayer(res, event) {
			//console.log(res, event)
			let text = $("."+res).find('.fold .text').text()
			if(text === '收起'){
				$("."+res).find('.fold .text').text('展开')
				$("."+res).find('.fold .fa').removeClass('fa-angle-up').addClass('fa-angle-down')

			}else if(text === '展开'){
				$("."+res).find('.fold .text').text('收起')
				$("."+res).find('.fold .fa').removeClass('fa-angle-down').addClass('fa-angle-up')
			}
			$("."+res).find('.content').slideToggle()
		},
		ProduceAddRadar(res, event) {
			$(".product-add .content_detail>div").removeClass('active')
			event.target.className = 'active'
			//console.log(getMonitorRadar)
			for(let i=0; i<getMonitorRadar.length; i++){
				for(let j=0; j<getMonitorRadar[i].content.length; j++){
					if(res === getMonitorRadar[i].content[j].name){
						this.$refs.factor.productAdd(getMonitorRadar[i].content[j])
					}
				}
			}
		},
		checkAutoman(event) {
			//console.log(event)
			$(".automan-rank .content-title>div").removeClass('active')
			$(".automan-rank .content-box>div").css({"display": "none"})
			event.target.className = 'active'
			let target = event.target.attributes[0].nodeValue
			$(".automan-rank .content-box>div."+target).css({"display": "block"})
		},
		toggleMapLayer() {
			let direction = $(".map-layer-show-toggle .fa").attr('class')
			if(direction.match('fa-angle-double-right')){
				$(".map-layer-show-toggle .fa").removeClass('fa-angle-double-right').addClass('fa-angle-double-left')
				$(".map-layer-right").animate({width:"0px"},500)
			}else if(direction.match('fa-angle-double-left')){
				$(".map-layer-show-toggle .fa").removeClass('fa-angle-double-left').addClass('fa-angle-double-right')
				$(".map-layer-right").animate({width:"432px"},500)
			}
		},
		adjustMap(res) {
		  //调整地图视图
			map.setView(120.5000,30.0700)
			if(res === '自动站' || res === '闪电' || res === '预报' || res === '天气' || res ==='水位'){
				map.setZoom(11)
			}else if(res === '雷达' || res === '卫星'){
				map.setZoom(9)
			}
		},
		checkTimeTitle(res, event) {
			//console.log(event)
			$(".automan_title span").removeClass('active')
			event.target.className = 'active'
			if(res.name.match('雷达回波')||res.name.match('估测')){
				for(let i=0; i<getMonitorRadar.length; i++){
					for(let j=0; j<getMonitorRadar[i].content.length; j++){
						if(res.name.match(getMonitorRadar[i].content[j].name)){
							this.$refs.factor.productAdd(getMonitorRadar[i].content[j])
						}
					}
				}
				this.$refs.factor.checktimeTitle('')
			}else{
				this.$refs.factor.checktimeTitle(res)
			}
		},
		closeTimeTitle(res) {
			if(res.name.match('雷达回波')||res.name.match('估测')){
				$(".product-add .content_detail>div").removeClass('active')
				map.removeTileLayer(this.imageLayer)
				QXMap.removeVectorMapProduct()
				QXMap.removeGridMapProduct()
				for(let i=0; i<this.monitortitle.length; i++){
					if(this.monitortitle[i].name === res.name){
						this.monitortitle.splice(i, 1)
					}
				}
				for(let i=0; i<this.monitortitle.length; i++){
					if(i === (this.monitortitle.length-1)){
						this.monitortitle[i].active = true
					}
				}
				this.$refs.factor.checktimeTitle('')
			}else{
				this.$refs.factor.closetimeTitle(res)
			}
		},
		showOther(isshow) {
			//console.log(map)
			//console.log(this.mapMask)
			let that = this
			let option = {
	    	  isshowname:false,
			  weight: 4,
			  fillOpacity: 0,
			  fillColor: "#fff",
			  opacity: 1,
			  color: "red",
			  linestyle: 'solid' //dot
			}
			let maker=QXMap.RegionLayer(AREACODE, option, (regionLayer) => {
				//console.log(regionLayer, map)

			    map.removeVectorLayer(that.mapMask)
			    map.addVectorLayer(regionLayer)
			    that.mapMask = regionLayer
			    // that.show
			    regionLayer.addMask(1)
			    map.fitBounds(regionLayer.getBound())
			    that.$options.methods.loadRegion()
			})

			// if(isshow){
			// 	this.mapMask.addMask(1)
			// }else{
			// 	this.mapMask.removeMask()
			// }
		},
		closeAutomanTable() {
			this.showAutomanTable = false
		},
		showautomantable(stationid, type, typename) {
			console.log(typename)
			//console.log(stationid)
			let tyCh = 2
			if(stationid.match('K')){
				tyCh = 1
			}
			let url = 'http://172.21.129.156:8081/web/rain/Monitor24HourTrend?stationId='+stationid+'&tyCh='+tyCh
			if(this.$refs.automanhourselect.value === 'hour'){
				url = 'http://172.21.129.156:8081/web/rain/Monitor24HourTrendInteger?stationId='+stationid+'&tyCh='+tyCh
			}
			$(".automan-table").attr('id', stationid)
			this.$http.get(url)
			.then((res) => {
				//console.log(res)
				this.automanStationdata = res.body.DS
				this.showStationData(type, typename)
			},(err) => {
				//console.log(err)
			})
		},
		checkautomanhour(type) {
			type = type.target.value
			let stationid = $(".automan-table").attr('id')
			let kinds = this.$refs.automanselect.value
			let kindsname
			switch(kinds){
				case 'Precipitation': kindsname = '降雨'; break;
				case 'WindVelocity': kindsname = '风向 风速'; break;
				case 'DryBulTemp': kindsname = '温度'; break;
			}
			this.showautomantable(stationid, kinds, kindsname)
		},
		showStationData(type, typename) {
			if(!typename){
				type = type.target.value
				if(type === 'DryBulTemp'){
					typename = '温度'
				}else if(type === 'Precipitation'){
					typename = '降雨'
				}else{
					typename = '风向 风速'
				}
			}
			//console.log(type)
			let myChart = echarts.init(document.getElementById('automan_detail'))
			let windDirection = []
			let timeArr = []
			for(let i=0; i<this.automanStationdata.length; i++){
				for(let j=0; j<this.windirection.length; j++){
					if(parseInt(this.automanStationdata[i].WindDirect)<=this.windirection[j][0]){
						this.automanStationdata[i].WindDirect=this.windirection[j][1]
					}
					this.automanStationdata[i].time = j
				}
				let time = this.automanStationdata[i].ObservTimes.slice(8,10)+":"+this.automanStationdata[i].ObservTimes.slice(10,12)
				timeArr.push(time)
			}
			myChart.clear()
			if(type === 'WindVelocity'){
				let directionMap = {}
				echarts.util.each(
			        ['W', 'WSW', 'SW', 'SSW', 'S', 'SSE', 'SE', 'ESE', 'E', 'ENE', 'NE', 'NNE', 'N', 'NNW', 'NW', 'WNW'],
			        function (name, index) {
			            directionMap[name] = Math.PI / 8 * index;
			        }
			    )
			    let data = echarts.util.map(this.automanStationdata, function (entry) {
			    	let time = entry.ObservTimes.slice(8,10)+":"+entry.ObservTimes.slice(10,12)
			        return [time, entry.WindVelocity, entry.WindDirect];
			    })
			    //console.log(data)
			    let dims = {
			        time: 0,
			        WindVelocity: 1,
			        WindDirect: 2
			    }
			    let arrowSize = 18
			   	function renderArrow(param, api) {
			        let point = api.coord([
			            api.value(dims.time),
			            api.value(dims.WindVelocity)
			        ]);

			        return {
			            type: 'path',
			            shape: {
			                pathData: 'M31 16l-15-15v9h-26v12h26v9z',
			                x: -arrowSize / 2,
			                y: -arrowSize / 2,
			                width: arrowSize,
			                height: arrowSize
			            },
			            rotation: directionMap[api.value(dims.WindDirect)],
			            position: point,
			            style: api.style({
			                stroke: '#555',
			                lineWidth: 1
			            })
			        };
			    }
			    let option = {
			        title: {
			            text: '近24小时风向风速趋势',
			            left: 'center'
			        },
			        tooltip: {
			            trigger: 'axis',
			            formatter: function (params) {
			                return [
			                	params[0].value[0],
			                    '风速：' + params[0].value[dims.WindVelocity],
			                    '风向：' + params[0].value[dims.WindDirect]
			                ].join('<br>');
			            }
			        },
			        grid: {
			            top: '8%',
			            left: '5%',
			            bottom: '5%',
			            right: '5%'
			        },
			        xAxis: {
			            type: 'category',
			            data: timeArr,
			            splitLine: {
			                lineStyle: {
			                    color: '#ddd'
			                }
			            }
			        },
			        yAxis: [{
			            type : 'value',
			            splitLine:{
　　　　						show:false
　　						},
						axisLabel: {
                        	show: true,
                        	textStyle: {
                            	color: '#333'
                        	}
                    	},
                    	axisLine:{
                    		lineStyle: {
                            	color: '#666'
                        	}
                    	},
			        }],
			        series: [{
			            type: 'custom',
			            renderItem: renderArrow,
			            encode: {
			                x: dims.time,
			                y: dims.WindVelocity
			            },
			            data: data,
			            z: 10
			        }, {
			            type: 'line',
			            symbol: 'none',
			            encode: {
			                x: dims.time,
			                y: dims.WindVelocity
			            },
			            lineStyle: {
			                normal: {
			                    color: '#aaa',
			                    type: 'dotted'
			                }
			            },
			            data: data,
			            z: 1
			        }]
			    }

			    myChart.setOption(option)
			}else{
				let isline = 'line'
				if(type === 'Precipitation'){
					isline = 'bar'
				}
				let dataArr = []
				for(let i=0; i<this.automanStationdata.length; i++){
					dataArr.push(this.automanStationdata[i][type])
				}
				let title = "近24小时趋势"+ typename
				let option = {
					 title: {
			            text: title,
			            left: 'center'
			        },
			        grid: {
			            top: '8%',
			            left: '5%',
			            bottom: '5%',
			            right: '5%'
			        },
			        xAxis: {
				        type: 'category',
				        data: timeArr
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [{
				        data: dataArr,
				        type: isline
				    }]
				}
				myChart.setOption(option)
			}
		},
		gridChange(res, type) {
			if(!res){
				map.removeTileLayer(this.imageLayer)
				QXMap.removeVectorMapProduct()
				QXMap.removeGridMapProduct()
				this.currentColorBar = {}
				this.$refs.colorbartitle.innerHTML = ''
				this.$refs.colorbardetail.innerHTML = ''
			}else{
				//console.log(res)
				let that = this
				map.removeTileLayer(this.imageLayer)
				QXMap.removeVectorMapProduct()
				QXMap.removeGridMapProduct()

		        QXMap.addVectorMapProduct(res, function (data) {
		        	if (data == null) return
		            that.currentColorBar = data.getColorBar()
		            that.colorBar(that.currentColorBar, type.name, 'type0')
		        })
			}
		},
    initWarning(){
		  this.isWarning = false
    }
	}
}
</script>

<style lang="less">
	.video-content{
		text-align: center;
		.video-img{
			// width: 20px;
			color: #00DEFF;
		}
	}

.plugin {
    width: 600px;
    height: 450px;
    z-index: 1000;
    background-color: #aaa;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -225px;
    margin-left: -300px;
    .colse{
    	position:absolute;
    	right: 10px;
    	top: 10px;
    	font-size: 18px;
    	width: 25px;
    	height: 25px;
    	line-height: 25px;
    	text-align: center;
    	border-radius:50%;
    	&:hover{
    		background:#e4393c;
    		cursor: pointer;
    	}
    }
    .plugin-header{
    	background:#092642;

    	color: #fff;
    	h3{
    		text-align: center;
    		// font-size:
    		height: 50px;
    		line-height: 50px;
    		font-size: 25px;
    	}
    	p{
    		text-align: center;
    		position:absolute;
				top:50%;
				// left: 50%;
				// width:250px;
				// margin-left: -125px;
				width: 100%;
				font-size: 28px;

	    }
    }
    #divPlugin{
			height: 500px;
		}
  }
.container-content{
	position: relative;
  .waring{
    position: absolute;
    text-align: center;
    width: 460px;
    height: 254px;
    // top: 50%:;
    // top: 0;
    // left: 0;
    // right: 0;
    // bottom: 0;
     top: 50%;
     left: 50%;
     margin-left: -230px;
     margin-top: -127px;
    // img{
    //   position: absolute;
    //   top: 50%;
    //   left: 50%;
    //   margin-left: -230px;
    //   margin-top: -127px;
    // }
  }
	.monitor-wind{
		// width: 100%;
		// float: right;
		position: fixed;
		top: 0;
		right: 0;
		box-sizing: border-box;
		overflow: hidden;
	}
	#factor{
		float: left;
		width: 100%;
		box-sizing: border-box;
	}
	#container{
		position: fixed;
		top: 0;
		right: 0;
		.qxmap-marker-icon{
			width: auto;
			height: auto;
			.qxmap-popup-content-wrapper{
				box-shadow: none;
				background: none;
				.qxmap-popup-content{
					background: none;
					.autoLabel{
						position: relative;
						width: 120px;
						text-align: center;
						background: rgba(52, 68, 120, 0.9);
						border-radius: 5px;
						padding: 3px 0;
						span{
							display: inline-block;
							width: 60px;
						}
						.autowater{
							color: #fff;
						}
						.autotemp{
							color: #3ED9FF;
						}
						.autowind{
							color: orange;
						}
						.autovisi{
							color: #66CC66;
						}
					}
					.autoLabel:after{
						position: absolute;
						content: '';
						width: 0;
						height: 0;
						border-right: 5px solid transparent;
						border-left: 5px solid transparent;
						border-top: 5px solid rgba(52, 68, 120, 0.9);
						bottom: -5px;
						left: 55px;
					}
					.waterlevelLabel{
						text-align: center;
						.text{
							background: rgba(52, 68, 120, 0.9);
						    color: #fff;
						    text-align: center;
						    padding: 5px 0;
						    border-radius: 5px;
						}
					}
					.autoImg{
						width: 120px;
    					text-align: center;
    					& > img{
    						width: 30px;
    						margin-top: 5px;
    					}
					}
					.autoName{
						width: 120px;
    					text-align: center;
					}
					.warnlabel .img{
						width: 60px;
					}
					.layerlabel{
						width: 120px;
						text-align: center;
						& >img{
							width: 30px;
						}
					}
				}
			}

		}
		.qxmap-marker-pane{
	      .qxmap-label-left{
	        display: none !important;
	      }
	    }
	}
	.monitor_title, .automan_title{
		position: fixed;
		top: 15px;
		left: 48%;
		min-width: 60px;
		min-height: 20px;
		line-height: 20px;
		padding: 5px 10px;
		background: rgba(45, 58, 89, 0.9);
		border: 1px solid #596294;
		box-shadow: #B6B7E0 0px 0px 2px 2px;
		border-radius: 5px;
		z-index: 10;
	}
	.monitor_title{
		& > span{
			color: #fff;
			display: block;
		}
	}
	.automan_title{
		& > div{
			position: relative;
			color: #fff;
			padding: 0 20px 0 0;
			& > span:first-child.active{
				color: #8AFEEC;
			}
			& > span:first-child{
				cursor: pointer;
			}
			& > span:first-child:hover{
				color: #8AFEEC;
			}
			& > span:last-child{
				position: absolute;
				right: 0;
				top: 0;
				cursor: pointer;
			}
			& > span:last-child:hover{
				color: #8AFEEC;
			}
		}
	}
	.color-bar{
		position: absolute;
		left: 80px;
		bottom: 56px;
		padding: 5px 10px;
		height: 37px;
		line-height: 22px;
		background: #fff;
		& > div{
			float: left;
		}
		.title{
			margin-right: 20px;
		}
		.detail{
			& > div{
				float: left;
				& > div{
					width: 45px;
				}
				& > div:first-child{
					height: 8px;
				}
				& > div:last-child{
					text-align: right;
				}
			}
		}
	}
	.waterlevelCharts{
		position: absolute;
		top: 50%;
		left: 50%;
		width:650px;
		height: 400px;
		margin-left: -325px;
		margin-top: -200px;
		border-radius: 10px;
		background: #fff;
	    border: 1px solid #596294;
	    box-shadow: #B6B7E0 0px 0px 2px 2px;
	    .closecharts{
	    	position: absolute;
	    	top: 5px;
	    	right: 10px;
    		font-size: 30px;
	    	color: #596294;
	    	cursor: pointer;
	    	z-index: 10;
	    }
	    #wlChart{
	    	width: 650px;
	    	height: 400px;
	    }
	}
	.warnInfo{
		position: absolute;
		border-radius: 7px;
		background: #fff;
	    border: 1px solid #596294;
	    box-shadow: #B6B7E0 0px 0px 2px 2px;
	    padding: 15px;
	    .closeWarnInfo{
	    	position: absolute;
	    	top: 0px;
	    	right: 5px;
    		font-size: 30px;
	    	color: #596294;
	    	cursor: pointer;
	    	z-index: 10;
	    }
	    .warnInfoContent{
	    	min-width: 140px;
	    	max-width: 230px;
	    	& > div{
	    		line-height: 30px;
	    	}
	    }
	}
	.map-layer-right{
		position: absolute;
		right: 10px;
		top: 10px;
		width: 420px;
		border-left: 12px solid rgba(0, 0, 0, 0.2);
		.map-layer-content{
			overflow: hidden;
		}
		.map-layer-content>.title{
			position: relative;
			width: 100%;
			height: 30px;
			line-height: 30px;
			color: #8AFEFF;
			font-weight: bold;
			padding-left: 3px;
			background: #3E5188;
			box-shadow: 0px 3px 0 #7984A8 inset;
			box-sizing: border-box;
			.fold{
				position: absolute;
				right: 5px;
				top: 0;
				color: #fff;
				cursor: pointer;
				font-weight: normal;
				.text{
					margin-right: 5px;
				}
			}
		}
		.map-layer-content>.content{
			width: 100%;
			background:rgba(16,35,96,0.65);
			padding: 5px 0;
			box-sizing: border-box;
		}
		.map-choose{
			.content{
				height: 54px;
				overflow: hidden;
				& > div{
					float: left;
					width: 75px;
					text-align: center;
					color: #fff;
					cursor: pointer;
					& > div:first-child{
						width: 20px;
			    		height: 20px;
			    		margin: 5px auto;
					}
					& > div:nth-child(2).active{
						color: #C5D372;
					}
					.map1{
			    		background: url('../../static/images/monitor/map1.png') no-repeat;
			    		background-size: cover;
			    	}
			    	.map2{
			    		background: url('../../static/images/monitor/map2.png') no-repeat;
			    		background-size: cover;
			    	}
			    	.map3{
			    		background: url('../../static/images/monitor/map3.png') no-repeat;
			    		background-size: cover;
			    	}
			    	.map1.active{
			    		background: url('../../static/images/monitor/map1_active.png') no-repeat;
			    		background-size: cover;
			    	}
			    	.map2.active{
			    		background: url('../../static/images/monitor/map2_active.png') no-repeat;
			    		background-size: cover;
			    	}
			    	.map3.active{
			    		background: url('../../static/images/monitor/map3_active.png') no-repeat;
			    		background-size: cover;
			    	}
				}
			}
		}
		.station-choose{
			.content{
				height: 100px;
				overflow: hidden;
				& > div{
					float: left;
					height: 30px;
    				line-height: 30px;
					text-align: center;
					color: #fff;
					cursor: pointer;
					padding-right: 10px;
					& > div{
						float: left;
					}
					& > div:first-child{
						width: 20px;
			    		height: 20px;
			    		margin: 5px;
					}
					& > div:nth-child(2).active{
						color: #C5D372;
					}
					.layer1{
						background: url('../../static/images/monitor/layer1.png') no-repeat;
						background-size: cover;
					}
					.layer2{
						background: url('../../static/images/monitor/layer2.png') no-repeat;
						background-size: cover;
					}
					.layer3{
						background: url('../../static/images/monitor/layer3.png') no-repeat;
						background-size: cover;
					}
					.layer4{
						background: url('../../static/images/monitor/layer4.png') no-repeat;
						background-size: cover;
					}
					.layer5{
						background: url('../../static/images/monitor/layer5.png') no-repeat;
						background-size: cover;
					}
					.layer6{
						background: url('../../static/images/monitor/layer6.png') no-repeat;
						background-size: cover;
					}
					.layer7{
						background: url('../../static/images/monitor/layer7.png') no-repeat;
						background-size: cover;
					}
					.layer8{
						background: url('../../static/images/monitor/layer8.png') no-repeat;
						background-size: cover;
					}
					.layer9{
						background: url('../../static/images/monitor/layer9.png') no-repeat;
						background-size: cover;
					}
					.layer10{
						background: url('../../static/images/monitor/layer10.png') no-repeat;
						background-size: cover;
					}
					.layer1.active{
						background: url('../../static/images/monitor/layer1_active.png') no-repeat;
						background-size: cover;
					}
					.layer2.active{
						background: url('../../static/images/monitor/layer2_active.png') no-repeat;
						background-size: cover;
					}
					.layer3.active{
						background: url('../../static/images/monitor/layer3_active.png') no-repeat;
						background-size: cover;
					}
					.layer4.active{
						background: url('../../static/images/monitor/layer4_active.png') no-repeat;
						background-size: cover;
					}
					.layer5.active{
						background: url('../../static/images/monitor/layer5_active.png') no-repeat;
						background-size: cover;
					}
					.layer6.active{
						background: url('../../static/images/monitor/layer6_active.png') no-repeat;
						background-size: cover;
					}
					.layer7.active{
						background: url('../../static/images/monitor/layer7_active.png') no-repeat;
						background-size: cover;
					}
					.layer8.active{
						background: url('../../static/images/monitor/layer8_active.png') no-repeat;
						background-size: cover;
					}
					.layer9.active{
						background: url('../../static/images/monitor/layer9_active.png') no-repeat;
						background-size: cover;
					}
					.layer10.active{
						background: url('../../static/images/monitor/layer10_active.png') no-repeat;
						background-size: cover;
					}
				}
			}
		}
		.automan-choose{
			.content{
				height: 29px;
				overflow: hidden;
				.station-type{
					label{
						display: inline-block;
						width: 86px;
						cursor: pointer;
						.icon-qixiang{
							background: url('../../static/images/monitor/qixiang.png') no-repeat;
						}
						.icon-shuili{
							background: url('../../static/images/monitor/shuili.png') no-repeat;
						}
						.icon-guotu{
							background: url('../../static/images/monitor/guotu.png') no-repeat;
						}
						.icon-huanbao{
							background: url('../../static/images/monitor/huanbao.png') no-repeat;
						}
						.icon{
							display: inline-block;
							width: 14px;
							height: 14px;
							background-size: cover;
							vertical-align: middle;
						}
						.text{
							color: #fff;
							line-height: 14px;
							padding: 0 5px 0 5px;
						}
						.checkbox{
							vertical-align: middle;
						}
					}
				}
			}
			.text{
				color: #fff;
			}
		}
		.waterlevel-choose{
			.content{
				height: 29px;
				overflow: hidden;
				.station-type{
					label{
						display: inline-block;
						width: 86px;
						cursor: pointer;
						.icon-hedao{
							background: url("../../static/images/monitor/hedao_icon.png") no-repeat;
						}
						.icon-shuiku{
							background: url("../../static/images/monitor/shuiku_icon.png") no-repeat;
						}
						.icon{
							display: inline-block;
							width: 14px;
							height: 14px;
							background-size: cover;
							vertical-align: middle;
						}
						.text{
							color: #fff;
							line-height: 14px;
							padding: 0 5px 0 5px;
						}
						.checkbox{
							vertical-align: middle;
						}
					}
				}
			}
			.text{
				color: #fff;
			}
		}
		.waterlevel-rank{
			width: 100%;
			color: #fff;
			.content{
				height: 440px;
				overflow-x: auto;
			}
			.content-des{
				height: 30px;
				line-height: 30px;
				padding-left: 15px;
			}
			.content-detail{
				width: 750px;
				height: 350px;
				& >div:first-child{
					padding: 10px 0;
				}
				& > div:nth-child(2n+1){
					background: rgba(255, 255, 255, 0.15);
				}
				& > div> div{
					float: left;
					text-align: center;
					height: 30px;
					line-height: 30px;
				}
				& > div > div:first-child{
					width: 60px;
				}
				& > div > div:nth-child(2){
					width: 135px;
				}
				& > div > div:nth-child(3){
					width: 90px;
				}
				& > div > div:nth-child(4){
					width: 60px;
				}
				& > div > div:nth-child(5){
					width: 110px;
				}
				& > div > div:nth-child(6){
					width: 130px;
				}
				& > div > div:nth-child(7){
					width: 165px;
				}
			}
			.page-pagination{
				text-align: center;
				padding: 5px 0;
			}
			.fa-arrow-up{
				color: red;
			}
			.fa-arrow-down{
				color: blue;
			}
		}
		.automan-rank{
			.content{
				padding: 0;
				height: 225px;
				overflow: hidden;
			}
			.content-title{
				// background: rgba(62, 81, 136, 0.9);
				& > div{
					float: left;
					width: 25%;
					height: 30px;
					line-height: 30px;
					border-top: 1px solid #666;
					color: #fff;
					text-align: center;
					cursor: pointer;
				}
				& > div.active{
					background: rgba(255, 255, 255, 0.5);
					color: rgba(62, 81, 136, 1);
				}
			}
			.content-box{
				display: none;
			}
		}
		.product-add{
			.content_detail{
				width: 100%;
				& > div{
					float: left;
					width: 80px;
					height: 24px;
					line-height: 24px;
					margin: 5px;
					border: 1px solid #FFF;
					border-radius: 5px;
					text-align: center;
					color: #fff;
					cursor: pointer;
				}
				& > div.active{
					background: #63DCF9;
					color: #415D92;
				}
			}
			.content_color{
				margin: 5px 0 0 5px;
				& > div{
					float: left;
					width: 30px;
					text-align: center;
					& > div:first-child{
						width: 30px;
						height: 10px;
						box-sizing: border-box;
						border-top: 1px solid #fff;
						border-bottom: 1px solid #fff;
						border-right: 1px solid #fff;
					}
					& > div:nth-child(2){
						color: #fff;
					}
				}
				& > div:first-child{
					& > div:first-child{
						border-left: 1px solid #fff;
					}
				}
			}
			.content{
				max-height: 111px;
				overflow: hidden;
			}
		}
		.region-choose{
			.content{
				& > div{
					float: left;
					color: #fff;
					padding: 5px;
    				cursor: pointer;
				}
			}
		}
		.map-layer-show-toggle{
			position: absolute;
			top: 50%;
			left: -12px;
			text-align: center;
			.fa{
				display: block;
			    width: 12px;
			    height: 40px;
			    line-height: 40px;
			    color: #436393;
			    cursor: pointer;
			    background: #fff;
    			font-size: 20px;
			}
		}
	}
	.check-radar{
		position: absolute;
	}
	.automan-table{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 600px;
		height: 450px;
		margin-left: -300px;
		margin-top: -215px;
		padding: 10px;
		background: #fff;
		border-radius: 5px;
		border: 1px solid #596294;
	    box-shadow: #B6B7E0 0px 0px 2px 2px;
		z-index: 10;
		.automan-table-choose{
			line-height: 30px;
			position: relative;
			.close-automan-table{
				position: absolute;
				top: 0;
				right: 0;
				font-size: 30px;
				cursor: pointer;
			}
		}
		#automan_detail{
			width: 600px;
			height: 400px;
		}
	}
}
.clear_float{
	display: block;
	content: '';
	clear: both;
}
  .active{
    border-bottom: 2px solid #ffffff;
  }
</style>
